<template>
	<!--    <view class="futureTitle">5天预报</view> -->
	<view class="temperature-box">
		<view class="temperatureItem" v-for="(v,i) in paramsStore.futureList">
			<view>{{dayjs(v.fxDate).format("MM-DD")}}</view>
			<view>{{v.windDirDay}}</view>
			<view>{{v.textDay}}</view>
			<view>{{v.tempMin}}°</view>
			<view>{{'|'}}</view>
			<view>{{v.tempMax}}°</view>
			<view>{{v.textNight}}</view>
			<view>{{v.windDirNight}}</view>
			<view>{{v.humidity}}%</view>
		</view>
	</view>
</template>

<script setup>
	import {
		paramasUserStore
	} from "@/store/params.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		getCurrentInstance
	} from "vue"
	import dayjs from "dayjs"
	const paramsStore = paramasUserStore()
	//引入proxy
	const {
		proxy
	} = getCurrentInstance()

	const weaterList = ref([]) //未来天气预报

	onShow(() => {

	})

	//获取天气预报 和风天气Api
	function getFutureWeather() {
		let key = '17606507ca584b41a425329b0b0ef51c'
		uni.request({
			//预报api 
			url: `https://devapi.qweather.com/v7/weather/7d?location=${paramsStore.longitude+","+paramsStore.latitude}&key=${key}`,
			success(res) {
				console.log("天气预报", res)
				if (res.statusCode != 200) return proxy.$msg('网络超时，获取实时天气失败，请重新拉取定位获取未来天气预报')
				weaterList.value = res.data.daily
				paramsStore.futureList = res.data.daily
			},
			fail(res) {

			}
		})

	}

	defineExpose({
		getFutureWeather
	})
</script>


<style lang="scss" scoped>
	.temperature-box {
		margin-top: 5%;
		height: 30%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row;
		background: rgb(55, 55, 55, 30%);
		box-sizing: border-box;
		padding: 0px 10px;
		margin: 0px 20px;
		border-radius: 10px;
		font-size: 12px;
		color: #fff;

		.temperatureItem {
			min-height: 240px;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			flex-direction: column;
		}

	}
</style>